<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue'

// 控制登录和注册模态框的显示
const showLoginModal = ref(false)
const showRegisterModal = ref(false)

// 打开登录模态框
function openLoginModal() {
  showLoginModal.value = true
}

// 关闭登录模态框
function closeLoginModal() {
  showLoginModal.value = false
}

// 打开注册模态框
function openRegisterModal() {
  showRegisterModal.value = true
}

// 关闭注册模态框
function closeRegisterModal() {
  showRegisterModal.value = false
}

// 模拟登录功能
function login() {
  const username = document.getElementById('login-username').value
  const password = document.getElementById('login-password').value
  
  if (username && password) {
    alert('登录成功！欢迎 ' + username)
    closeLoginModal()
  } else {
    alert('请输入用户名和密码')
  }
}

// 模拟注册功能
function register() {
  const username = document.getElementById('register-username').value
  const password = document.getElementById('register-password').value
  const confirmPassword = document.getElementById('register-confirm-password').value
  
  if (!username || !password || !confirmPassword) {
    alert('请填写所有信息')
    return
  }
  
  if (password !== confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }
  
  alert('注册成功！请登录')
  closeRegisterModal()
  openLoginModal()
}
</script>

<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="news-header">
      <div class="top-nav">
        <div class="top-nav-left">
          <span class="welcome">欢迎访问网易新闻</span>
        </div>
        <div class="top-nav-right">
          <a href="#" @click.prevent="openLoginModal">登录</a>
          <a href="#" @click.prevent="openRegisterModal">注册</a>
          <a href="#">客户端</a>
          <a href="#">网页版</a>
        </div>
      </div>
      
      <!-- 主标题区 -->
      <div class="main-title">
        <h1>网易新闻</h1>
      </div>
      
      <!-- 新闻分类导航 -->
      <nav class="news-nav">
        <RouterLink to="/" class="nav-item" active-class="nav-item-active">首页</RouterLink>
        <RouterLink to="/domestic" class="nav-item" active-class="nav-item-active">国内</RouterLink>
        <a href="#" class="nav-item">国际</a>
        <a href="#" class="nav-item">财经</a>
        <a href="#" class="nav-item">娱乐</a>
        <a href="#" class="nav-item">体育</a>
        <a href="#" class="nav-item">军事</a>
        <a href="#" class="nav-item">科技</a>
        <a href="#" class="nav-item">汽车</a>
        <a href="#" class="nav-item">游戏</a>
        <a href="#" class="nav-item">教育</a>
      </nav>
    </header>
    
    <!-- 主要内容区域 -->
    <main>
      <RouterView />
    </main>
    
    <!-- 页脚 -->
    <footer class="news-footer">
      <div class="footer-content">
        <p>© 1997-2023 网易公司版权所有</p>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">招聘信息</a>
          <span>|</span>
          <a href="#">客户服务</a>
        </div>
      </div>
    </footer>
    
    <!-- 登录模态框 -->
    <div v-if="showLoginModal" class="modal-overlay" @click="closeLoginModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>用户登录</h3>
          <button class="modal-close" @click="closeLoginModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="login-username">用户名</label>
            <input type="text" id="login-username" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="login-password">密码</label>
            <input type="password" id="login-password" placeholder="请输入密码">
          </div>
          <div class="form-options">
            <label>
              <input type="checkbox"> 记住我
            </label>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>
          <button class="btn-login" @click="login">登录</button>
          <div class="other-login">
            <span>其他方式登录</span>
            <div class="login-methods">
              <a href="#" class="login-wechat">微信登录</a>
              <a href="#" class="login-qq">QQ登录</a>
              <a href="#" class="login-weibo">微博登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 注册模态框 -->
    <div v-if="showRegisterModal" class="modal-overlay" @click="closeRegisterModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>用户注册</h3>
          <button class="modal-close" @click="closeRegisterModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="register-username">用户名</label>
            <input type="text" id="register-username" placeholder="请设置用户名">
          </div>
          <div class="form-group">
            <label for="register-password">密码</label>
            <input type="password" id="register-password" placeholder="请设置密码">
          </div>
          <div class="form-group">
            <label for="register-confirm-password">确认密码</label>
            <input type="password" id="register-confirm-password" placeholder="请再次输入密码">
          </div>
          <div class="form-options">
            <label>
              <input type="checkbox"> 我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a>
            </label>
          </div>
          <button class="btn-register" @click="register">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 顶部导航样式 */
.news-header {
  width: 100%;
  background-color: #fff;
  border-bottom: 2px solid #c80000;
}

.top-nav {
  height: 30px;
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 12px;
}

.top-nav a {
  cursor: pointer;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  width: 400px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #c80000;
}

.form-options {
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-password {
  color: #c80000;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.btn-login, .btn-register {
  width: 100%;
  padding: 10px;
  background-color: #c80000;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.btn-login:hover, .btn-register:hover {
  background-color: #a80000;
}

.other-login {
  text-align: center;
}

.other-login span {
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.login-methods {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.login-wechat, .login-qq, .login-weibo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
}

.login-wechat {
  background-color: #07C160;
}

.login-qq {
  background-color: #12B7F5;
}

.login-weibo {
  background-color: #E6162D;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    margin: 0 10px;
  }
}

.top-nav a {
  color: #666;
  text-decoration: none;
  margin-left: 15px;
}

.top-nav a:hover {
  color: #c80000;
}

/* 主标题样式 */
.main-title {
  text-align: center;
  padding: 20px 0;
}

.main-title h1 {
  font-size: 42px;
  color: #c80000;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
}

/* 新闻分类导航 */
.news-nav {
  background-color: #c80000;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.nav-item {
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.nav-item:hover,
.nav-item.router-link-exact-active,
.nav-item-active {
  background-color: #a80000;
  color: #fff;
}

/* 页脚样式 */
.news-footer {
  background-color: #f4f4f4;
  padding: 20px 0;
  margin-top: 30px;
  border-top: 1px solid #ddd;
}

.footer-content {
  text-align: center;
  font-size: 12px;
  color: #666;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  margin: 0 5px;
}

.footer-links a:hover {
  color: #c80000;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>
